import { request } from "../../request/index.js";
// pages/category/index.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //左侧的菜单数据
    leftMenuList: [],
    //右侧的菜单数据
    rightContent: [],
    // 被点击的左侧的菜单
    currentIndex: 0,
    //右侧内容的滚动条距离顶部的距离
    scrollTop:0
  },
  // 接口的返回数据
  Cates: [],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // web中本地存储和小程序中本地存储区别
    // 写代码方式不一样
    // web:localStorage.setItem("key","value") localStorage.getItem("key");
    // 小程序：wx.setStorageSync("key","value");wx.getStorageSync("key");
    // 存的时候 有没有做类型转换
    // web不管存入的是什么类型的数据，最终都会先调用一下toString(),把数据变成字符串 再存进去
    // 小程序：不存在类型转换这个操作 村什么类型进去 获取的时候就是什么类型


    // 先判断一下本地储存中有没有旧的数据
    // {time：Date.now(),data:[...]}
    // 没有旧数据就直接发送新请求
    // 有旧数据同时旧的数据也没有过期 就是用本地的就数据即可

    // 1.获取本地存储的数据 （小程序中也存在本地存储技术）
    const Cates = wx.getStorageSync('cates');
    //2.判断
    if (!Cates) {
      //不存在
      this.getCates();
    } else {
      //有旧的数据 定义过期时间10s改成5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        //重新发送请求
        this.getCates();
      } else {
        //可以使用旧数据
        // console.log("可以是永久数据");
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        });
      }
    }
    // this.getCates()
  },

  // 获取分裂数据

  getCates() {
    request({
      url: "/categories"
    })
      .then(res => {
        this.Cates = res;

        //把接口的数据存到本地存储中
        wx.setStorageSync('cates', { time: Date.now(), data: this.Cates });

        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name);
        //构造右侧的商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        });
      })
  },

  // 左侧菜单点击事件
  handleItemTap(e) {
    // 获取点击的标题身上的索引
    //给data中的currentIndex赋值
    const { index } = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
 
    this.setData({
      currentIndex: index,
      rightContent,
         //重新设置右侧内容的scroll-top距离
         scrollTop:0
    });

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})